<template>
	<van-nav-bar
		title="充值中心"
		left-arrow
		@click-left="goBack"
		left-text="返回"
	/>
	<van-notice-bar
		left-icon="warning"
		:scrollable="false"
		text="公告：未满18岁的未成年人请勿消费"
	/>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field
				v-model="LoginUser.money"
				name="money"
				label="账号余额："
				left-icon="gold-coin"
				readonly
			/>

			<van-field
				v-model="LoginUser.nickname"
				name="nickname"
				label="用户："
				left-icon="manager"
				readonly
			/>
			<van-field name="originalprice" label="自定义金额" @click="show2 = true">
				<template #input>
					<label>{{ originalprice }}</label>
				</template>
			</van-field>
			<van-divider
				:style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
			>
				固定金额
			</van-divider>
			<van-button icon="gold-coin" type="primary" plain @click="onclick(5)">
				5元
			</van-button>
			<van-button icon="gold-coin" type="primary" plain @click="onclick(10)">
				10元
			</van-button>
			<van-button icon="gold-coin" type="primary" plain @click="onclick(20)">
				20元
			</van-button>
			<van-button icon="gold-coin" type="primary" plain @click="onclick(50)">
				50元
			</van-button>
			<van-button icon="gold-coin" type="primary" plain @click="onclick(100)">
				100元</van-button
			>
			<van-button icon="gold-coin" type="primary" plain @click="onclick(200)">
				200元
			</van-button>
		</van-cell-group>

		<div style="margin: 16px">
			<van-button round block type="primary" native-type="submit" size="large">
				充值
			</van-button>
		</div>
	</van-form>
	<van-number-keyboard
		:show="show2"
		theme="custom"
		extra-key="."
		close-button-text="完成"
		@blur="show2 = false"
		@input="onInput"
		@delete="onDelete"
	/>
	<van-dialog
		v-model:show="show"
		title="立即支付"
		show-cancel-button
		confirmButtonText="立即支付"
		@confirm="onpayment"
	>
		<van-field
			is-link
			readonly
			label="支付方式"
			v-model="test"
			placeholder="请选择支付方式"
			@click="show1 = true"
		/>
		<van-popup v-model:show="show1" round position="bottom">
			<van-cascader
				v-model="payment"
				title="支付方式"
				:options="way"
				@close="show1 = false"
				@finish="show1 = false"
				@change="onChange"
			/>
		</van-popup>
		<div class="way"></div>
	</van-dialog>
</template>

<script setup>
	const router = useRouter();
	const { cookies } = useCookies();
	const LoginUser = reactive(cookies.get("LoginUser"));
	LoginUser.money = "￥" + LoginUser.money;
	const originalprice = ref("");
	const show = ref(false);
	const show1 = ref(false);
	const show2 = ref(false);
	const test = ref("微信");
	const way = [
		{ text: "微信", value: 0 },
		{ text: "支付宝", value: 1 },
	];
	const payment = ref(0);
	const goBack = () => {
		router.push("/business/index");
	};
	const onclick = (value) => {
		originalprice.value = value;
	};
	const onSubmit = () => {
		if (!LoginUser) {
			showSuccessToast({
				message: "未登录，请登录",
				onClose: function () {
					router.push("/business/index");
				},
			});
		}
		if (originalprice.value == "") {
			showSuccessToast("请输入金额");
			return;
		}
		show.value = true;
	};
	const onInput = (value) => {
		originalprice.value = originalprice.value.toString() + value;
	};
	const onDelete = () => {
		let count = originalprice.value.toString().length;
		originalprice.value = originalprice.value.toString().substring(0, count - 1);
	};
	const onpayment = async () => {
		let result = await Api.pay.pay({
			money: originalprice.value,
			busid: LoginUser.id,
			paytype: payment.value,
		});
		if (result.code == 1) {
			if (result.msg == "支付订单创建成功") {
				router.push({
					path: "/business/order/pay",
					query: {
						id: result.data.id,
					},
				});
			} else {
				showSuccessToast({
					message: result.msg,
					onClose: function () {
						window.location.reload();
					},
				});
			}
		} else {
			showFailToast(result.msg);
		}
	};
	const onChange = ({ value }) => {
		way.forEach((item) => {
			if (item.value == value) {
				test.value = item.text;
			}
		});
	};
</script>

<style scoped lang="scss">
	.van-cell-group .van-button {
		width: 30%;
		height: 50px;
		margin-top: 10px;
		&:nth-of-type(2),
		&:nth-of-type(5) {
			margin-left: 5%;
			margin-right: 5%;
		}
	}
	.van-dialog {
		height: 50%;
	}
	.way {
		padding: 40px 10px 20px;
		text-align: center;
		font-size: 20px;
		color: #b01f1f;
	}
</style>